<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <style></style>
</head>
<body>
  <form action="" method="post">
    <h1>欢迎注册</h1>
    <table>
      <tr>
        <td>用户名</td>
        <td>
          <input type="text" value="">
        </td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" name="sex" value="0" checked>男
          <input type="radio" name="sex" value="1" >女
        </td>
      </tr>
      <tr>
        <td>密码</td>
        <td>
          <input type="password" value="">
        </td>
      </tr>
      <tr>
        <td>确认密码</td>
        <td>
          <input type="password" value="">
        </td>
      </tr>
      <tr>
        <td>手机号码</td>
        <td>
          <input type="text" value="">
        </td>
      </tr>
      <tr>
        <td>验证码</td>
        <td>
          <input type="text" value="">
        </td>
        <td>
          <img src="" alt="" width="30">
        </td>
      </tr>
      <tr>
        <td colspan="3" style="text-align: center;">
          <input type="checkbox" id="yes">
          <label for="yes">我已阅读并同意</label>
          <a href="">《用户注册协议》</a>
      </tr>
      <tr>
        <td colspan="3" style="text-align:center;">
          <input type="submit" value="立即注册">
        </td>
      </tr>
    </table>
  </form>
  <script>
    //创建一个自定义函数，用于封装ajax方法
    function ajax(){
      //创建xhr对象
      var xhr = new XMLHttpRequest();
    console.log(xhr);
    xhr.onreadystatechange = function(){
      //console.log(xhr.readyState);//如果要判断readystae是4的时候才可以拿到后台数据
      if(xhr.readyState == 4){
        //可以拿到后台数据也不能保证后台不出问题，判断后台返回内容成功，在进行数据接收。
        if(xhr.status>=200 && xhr.status<300){
        var result = xhr.responseText;
        console.log(result);
        //alert('可以了');
        }
      }
    }
    //调用open方法,设置请求信息
    var $uname=user.value //获取输入框中的内容
     var $upwd=password.value
    //多个参数连接用&
    xhr.open('post','/user',true)
    //发送请求
    xhr.send();
    }
    ajax();
  </script>
</body>
</html>
